<template>
  <view>
    <up-sticky offset-top="0">
      <scroll-view style="flex: 1" class="breadcrumb-bar">
        <uni-breadcrumb separator=">">
          <uni-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index"
                               @click="viewItem(item)">
            <text :style="{fontWeight: item.bold ? 'bold': 'normal', color: 'white'}">
              {{ item[properties.label] }}
            </text>
          </uni-breadcrumb-item>
        </uni-breadcrumb>
      </scroll-view>
    </up-sticky>
    <up-swipe-action v-for="(item, index) in dataList" :key="index">
      <up-swipe-action-item :options="actionOptions" :name="JSON.stringify(item)" @click="clickBtn">
        <up-cell style="background-color: white; padding: 0 16rpx"
                 :title="item[properties.label]"
                 @click="handleSelect(item)"
                 isLink>
          <template #icon>
            <view style="height: 100%; display: flex; align-items: center; margin-right: 16rpx">
              <image style="width: 32rpx;height: 32rpx;" src="/static/images/icon/category.png"></image>
            </view>
          </template>
          <template #right-icon>
            <view @click.stop="viewChildren(item)">
              <uni-icons type="right" color="#aaa"></uni-icons>
            </view>
          </template>
        </up-cell>
      </up-swipe-action-item>
    </up-swipe-action>
    <view v-if="dataList.length === 0">
      <up-empty
          style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
          mode="list"
      >
      </up-empty>
    </view>
  </view>
</template>

<script>
import UniBreadcrumb from "@/uni_modules/uni-breadcrumb/components/uni-breadcrumb/uni-breadcrumb.vue";
import UniBreadcrumbItem from "@/uni_modules/uni-breadcrumb/components/uni-breadcrumb-item/uni-breadcrumb-item.vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons, UniBreadcrumb, UniBreadcrumbItem},
  props: {
    tree: {
      type: Object,
      default: () => ({})
    },
    properties: {
      type: Object,
      default: () => ({
        label: 'label',
        value: 'value'
      })
    },
  },
  data() {
    return {
      selectVal: '',
      currentVal: 0,
      actionOptions: [{
        text: '编辑',
        style: {
          backgroundColor: '#2979ff',
        }
      }, {
        text: '删除',
        style: {
          backgroundColor: '#fa3534',
        }
      }]
    }
  },
  computed: {
    breadcrumbList() {
      return this.findListByVal(this.tree, this.currentVal);
    },
    currentItem() {
      return this.findByVal(this.tree, this.currentVal);
    },
    dataList() {
      if (!this.currentItem.children) {
        this.currentItem.children = []
      }
      return this.currentItem.children;
    }
  },
  methods: {
    showItemList(val) {
      this.currentVal = val
    },
    findListByVal(item, val) {
      if (item[this.properties.value] == val) {
        const breadCrumbItem = {...item};
        breadCrumbItem.bold = true;
        return [breadCrumbItem]
      }
      if (item.children && item.children.length !== 0) {
        for (const child of item.children) {
          const find = this.findListByVal(child, val);
          if (find && find.length !== 0) {
            const parentItem = {...item};
            parentItem.bold = false;
            return [parentItem, ...find];
          }
        }
      }
      return [];
    },
    findByVal(item, val) {
      if (item[this.properties.value] == val) {
        return item
      }
      if (item.children && item.children.length !== 0) {
        for (const child of item.children) {
          const find = this.findByVal(child, val);
          if (find) {
            return find;
          }
        }
      }
      return null;
    },
    getCurrentItem() {
      return this.currentItem;
    },
    viewChildren(item) {
      this.currentVal = item[this.properties.value];
    },
    clickBtn(item) {
      this.$emit('handleClickOption', item)
    },
    handleSelect(item) {
      this.$emit('select', item)
    },
    viewItem(item) {
      if (item[this.properties.value] === this.currentItem[this.properties.value]) {
        return;
      }
      this.currentVal = item[this.properties.value];
    }
  },
  beforeMount() {
  }
}
</script>

<style scoped lang="scss">
.breadcrumb-bar {
  padding: 12rpx 30rpx;
  background-color: #01b5b2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12rpx;
  justify-content: space-between;
}

:deep(.uni-breadcrumb-item--separator) {
  color: white;
}
</style>
